<template>
  <div class="login" ref="div">
    <!--topnav-->
    <top-nav :curpages="2"></top-nav>

    <div class="com-middle">
      <!--<img src="../../assets/product/pro-bg.jpg" alt="" class="comm-bg">-->
      <div class="comm-content">
        <h3>项目投资</h3>
        <!--<div class="commc-nav">-->
        <!--<div class="comn-shouyi comn-com" :class="{active:curActive == 1}" @click="typeOne">-->
        <!--收益权类-->
        <!--</div>-->
        <!--<div class="comn-huidi comn-com" :class="{active:curActive == 2}" @click="typeTwo">-->
        <!--汇滴通-->
        <!--</div>-->
        <!--<div class="comn-guquan comn-com" :class="{active:curActive == 3}" @click="typeThree">-->
        <!--股权类-->
        <!--</div>-->
        <!--</div>-->

        <ul class="clear com-detail">
          <li v-for="list in productList">
            <router-link :to="{ name: 'productDetail', params: { id: list.id }}" @click="">
              <div class="mod-left">
                <p class="ml-title">预期年化收益</p>
                <p class="ml-rate">
                  {{list.rate}}
                  <img src="../../assets/product/down-arrow.png" alt="">
                </p>
              </div>
              <div class="mod-right">
                <div class="modr-big">
                  <!--单季赢-->
                  {{list.name}}
                </div>
                <div class="modr-details">
                  <div class="modrd-one">
                    <span>起投金额:<i>{{list.startUpNum}}万元</i></span>
                    <span>投资周期:<i>{{list.period}}个月</i></span>
                  </div>
                  <div class="modrd-two">
                    预期年化收益率：{{list.rate}}
                  </div>
                  <div class="modrd-three">
                    收益方式：{{list.incomeMethod}}
                  </div>
                </div>
                <a class="see-details">

                </a>
              </div>
            </router-link>

          </li>
        </ul>
      </div>
    </div>
    <mo-paging
      :total="count"
      :page-size="pageSize"
      @change="pageChange">
    </mo-paging>
    <bottom></bottom>

  </div>
</template>

<script>
  import topNav from '@/components/topNav/topnav'
  import bottom from '@/components/bottom/bottom'
  import api from '@/utils/api'
  import {mapGetters, mapActions} from "vuex"
  import MoPaging from '@/components/paginate/paginate'

  export default {
    components: {
      topNav,
      bottom,
      MoPaging
    },
    data() {
      return {
        curActive: 1,
        productList: [],//产品列表
        pageSize: 5, //每页显示20条数据
        count: 0 //总记录数
      }
    },
    computed: {},
    methods: {
      typeOne() {
        this.curActive = 1;
        this.init();
      },
      typeTwo() {
        this.curActive = 2
      },
      typeThree() {
        this.curActive = 3
      },
      init(curpage) {
        this.$store.dispatch("Post", {
          url: api.product,
          data: {
            page: curpage,
            size: this.pageSize
          }
        }).then((res) => {
          this.count = res.data.totalElements;
          this.productList = res.data.content;
        })

      },
      //从page组件传递过来的当前page
      pageChange(page) {
        this.currentPage = page
        this.init(page - 1)
      }

    },
    mounted() {
      this.init(0);
    }
  }
</script>
<style scoped lang="scss">

  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 42px;
        line-height: 65px;
        margin-top: 110px;
      }
      .commc-nav {
        width: 100%;
        height: 75px;
        background-color: #ffffff;
        margin-top: 70px;
        position: relative;
        .comn-com {
          width: 240px;
          height: 91px;
          position: absolute;
          bottom: 0;
          z-index: 99;
          color: #000000;
          text-align: center;
          line-height: 105px;
          font-size: 28px;
          &.active {
            background: url(../../assets/product/top.png) center no-repeat;
            color: #ffffff;
          }
        }
        .comn-shouyi {
          left: 108px;
        }
        .comn-huidi {
          left: 490px;
        }
        .comn-guquan {
          left: 790px;
        }

      }

      .com-detail {
        width: 996px;
        margin: 50px auto 0;

        li {
          width: 100%;
          height: 200px;
          float: left;
          margin-bottom: 75px;
          background: rgba(255, 255, 255, .6);
          .mod-left {
            width: 200px;
            height: 200px;
            float: left;
            background: url(../../assets/product/mod-left-bg.png) center no-repeat;
            .ml-title {
              width: 100%;
              color: #ffffff;
              font-size: 24px;
              text-align: center;
              margin: 30px 0 10px;
            }
            .ml-rate {
              width: 175px;
              color: #ffffff;
              font-size: 36px;
              text-align: center;
              margin: 10px auto;
              padding: 8px 0;
              border-top: 5px solid #ffffff;
              border-bottom: 4px solid #ffffff;
              font-family: "Hannotate SC", Yuanti SC, YouYuan, Wawati SC, NSimSun;
              font-weight: 600;
              position: relative;
              img {
                display: block;
                position: absolute;
                bottom: -19px;
                left: 50%;
                margin-left: -11px;
              }
            }
          }
          .mod-right {
            width: 796px;
            height: 200px;
            float: left;
            position: relative;
            .modr-big {
              width: 298px;
              height: 200px;
              line-height: 200px;
              font-weight: 800;
              font-size: 40px;
              font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
              text-align: center;
              color: #484847;
              float: left;
              overflow: hidden;
            }
            .modr-details {
              width: 400px;
              float: left;
              margin: 40px 0 0 30px;
              .modrd-one {
                width: 100%;
                margin-bottom: 12px;
                text-align: left;
                span {
                  font-size: 20px;
                  color: #484847;
                  margin-right: 50px;
                  i {
                    color: #ff6430;
                    font-style: inherit;
                  }
                }

              }
              .modrd-two {
                width: 100%;
                text-align: left;
                font-size: 20px;
                color: #484847;
                margin-bottom: 12px;
              }
              .modrd-three {
                width: 270px;
                text-align: left;
                font-size: 20px;
                color: #484847;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow:hidden;
              }
            }
            .see-details {
              width: 150px;
              height: 40px;
              position: absolute;
              bottom: 20px;
              right: 50px;
              background: url(../../assets/product/see-detail.png) center no-repeat;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1400px) {
    .com-middle {
      width: 100%;
      min-width: 1210px;
      background: url(../../assets/product/pro-bg.jpg) center no-repeat;
      background-size: cover;
      position: relative;
      .comm-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        h3 {
          width: 100%;
          height: 65px;
          background: url(../../assets/product/line.png) center no-repeat;
          background-size: 1200px 4px;
          text-align: center;
          color: #ffffff;
          font-size: 36px;
          line-height: 65px;
          margin-top: 110px;
        }
        .commc-nav {
          width: 100%;
          height: 75px;
          background-color: #ffffff;
          margin-top: 70px;
          position: relative;
          .comn-com {
            width: 240px;
            height: 91px;
            position: absolute;
            bottom: 0;
            z-index: 99;
            color: #000000;
            text-align: center;
            line-height: 105px;
            font-size: 28px;
            &.active {
              background: url(../../assets/product/top.png) center no-repeat;
              color: #ffffff;
            }
          }
          .comn-shouyi {
            left: 108px;
          }
          .comn-huidi {
            left: 490px;
          }
          .comn-guquan {
            left: 790px;
          }

        }

        .com-detail {
          width: 860px;
          margin: 50px auto 0;

          li {
            width: 100%;
            height: 160px;
            float: left;
            margin-bottom: 75px;
            background: rgba(255, 255, 255, .6);
            .mod-left {
              width: 24%;
              height: 160px;
              float: left;
              background: url(../../assets/product/mod-left-bg.png) center no-repeat;
              background-size: 100% 100%;
              .ml-title {
                width: 100%;
                color: #ffffff;
                font-size: 24px;
                text-align: center;
                margin: 16px 0 6px;
              }
              .ml-rate {
                width: 175px;
                color: #ffffff;
                font-size: 36px;
                text-align: center;
                margin: 6px auto;
                padding: 4px 0;
                border-top: 5px solid #ffffff;
                border-bottom: 4px solid #ffffff;
                font-family: "Hannotate SC", Yuanti SC, YouYuan, Wawati SC, NSimSun;
                font-weight: 600;
                position: relative;
                img {
                  display: block;
                  position: absolute;
                  bottom: -19px;
                  left: 50%;
                  margin-left: -11px;
                }
              }
            }
            .mod-right {
              width: 76%;
              height: 160px;
              float: left;
              position: relative;
              .modr-big {
                width: 34%;
                height: 160px;
                font-weight: 800;
                font-size: 32px;
                font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
                color: #484847;
                float: left;
                overflow: hidden;
                line-height: 160px;
              }
              .modr-details {
                width: 50%;
                float: left;
                margin: 28px 0 0 10px;
                .modrd-one {
                  width: 100%;
                  margin-bottom: 12px;
                  text-align: left;
                  span {
                    font-size: 16px;
                    color: #484847;
                    margin-right: 50px;
                    i {
                      color: #ff6430;
                      font-style: inherit;
                    }
                  }

                }
                .modrd-two {
                  width: 100%;
                  text-align: left;
                  font-size: 16px;
                  color: #484847;
                  margin-bottom: 12px;
                }
                .modrd-three {
                  width: 228px;
                  text-align: left;
                  font-size: 16px;
                  color: #484847;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow:hidden;
                }
              }
              .see-details {
                width: 150px;
                height: 40px;
                position: absolute;
                bottom: 20px;
                right: 50px;
                background: url(../../assets/product/see-detail.png) center no-repeat;
              }
            }
          }
        }
      }
    }
  }

  .comm-bg {
    width: 100%;
    height: auto;
    display: block;
  }

</style>
